<template>
  <div id="echartDiv"></div>
</template>
<script>
export default {
  data() {
    return {
      xAxisData: ["浩星", "妍仔", "哆啦a梦", "李强", "王颖", "老王"],
      yAxisData: [4, 22, 1, 11, 23, 11],
      yAxisData1: [1, 1, 1, 1, 1, 1],
    };
  },
  methods: {
    echartInit() {
      let myChart = this.$echarts.init(document.getElementById("echartDiv"));
      var option = {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
          },
          formatter: function (parms) {
            var str =
              parms[0].axisValue +
              "</br>" +
              parms[0].marker +
              "今天登录：" +
              parms[0].value +
              "次";
            return str;
          },
        },
        textStyle: {
          color: "#333",
        },
        color: ["#6ce4ff", "#71b8ff"],
        grid: {
          containLabel: true,
          left: "10%",
          top: "20%",
          bottom: "10%",
          right: "10%",
        },
        xAxis: {
          type: "category",
          data: this.xAxisData,
          axisLine: {
            lineStyle: {
              color: "#333",
            },
          },
          axisTick: {
            show: false,
          },
          axisLabel: {
            margin: 20, //刻度标签与轴线之间的距离。
            textStyle: {
              color: "#000",
            },
          },
        },
        yAxis: {
          type: "value",
          axisLine: {
            show: true,
            lineStyle: {
              color: "#B5B5B5",
            },
          },
          splitLine: {
            lineStyle: {
              // 使用深浅的间隔色
              color: ["#B5B5B5"],
              type: "dashed",
              opacity: 0.5,
            },
          },
          axisLabel: {},
        },
        series: [
          {
            data: this.yAxisData,
            stack: "zs",
            type: "bar",
            barMaxWidth: "auto",
            barWidth: 60,
            itemStyle: {
              color: {
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                type: "linear",
                global: false,
                colorStops: [
                  {
                    offset: 0,
                    color: "#5EA1FF",
                  },
                  {
                    offset: 1,
                    color: "#90BEFF",
                  },
                ],
              },
            },
          },

          //下面的立体,控制颜色是color第一个
          {
            data: this.yAxisData1,
            type: "pictorialBar",
            barMaxWidth: "12",
            symbol: "diamond",
            // symbolOffset: [0, "50%"],
            symbolSize: [12, 8],
            zlevel: 2,
          },
          //上面的立体,控制颜色是color第二个
          {
            data: this.yAxisData,
            type: "pictorialBar",
            barMaxWidth: "20",
            symbolPosition: "end",
            symbol: "diamond",
            symbolOffset: [0, "-50%"],
            symbolSize: [60, 12],
            zlevel: 2,
          },
        ],
      };
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
    },
  },
  mounted() {
    this.echartInit();
  },
};
</script>

<style>
#echartDiv {
  width: 100%;
  height: 400px;
}
</style>
